<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1034 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path d="M767.314 675.154c-67.584 0-122.532-54.948-122.532-122.532S699.73 430.08 767.314 430.08s122.542 54.958 122.542 122.542c.338 32.42-12.288 63.14-35.502 86.354a122.696 122.696 0 0 1-87.04 36.178zm0-204.114a81.572 81.572 0 1 0 0 163.154 80.783 80.783 0 0 0 58.03-24.228c15.36-15.36 23.552-35.84 23.552-57.344 0-45.056-36.526-81.582-81.582-81.582zM672.43 936.96H548.864a27.533 27.533 0 0 1-27.648-27.648V824.32c0-73.39 59.73-132.782 132.782-132.782h18.432c11.264 0 20.48 9.216 20.48 20.48s-9.216 20.48-20.48 20.48h-18.432c-50.524 0-91.822 41.308-91.822 91.822V896H672.43c11.264 0 20.48 9.216 20.48 20.48s-9.216 20.48-20.48 20.48zm313.682 0H862.546c-11.264 0-20.48-9.216-20.48-20.48s9.216-20.48 20.48-20.48H972.8v-71.68c0-50.514-41.298-91.822-91.822-91.822h-18.432c-11.264 0-20.48-9.216-20.48-20.48s9.216-20.48 20.48-20.48h18.432c73.39 0 132.782 59.74 132.782 132.782v84.992a27.533 27.533 0 0 1-27.648 27.648zm-217.426 33.454a27.29 27.29 0 0 1-20.828-9.564l-39.588-45.056-.686-.676c-5.12-6.144-7.168-13.998-6.482-21.504l11.94-135.854c1.024-11.264 10.926-19.794 22.19-18.77 11.264 1.024 19.456 10.916 18.77 22.18L742.4 892.242l26.286 29.696 26.276-29.696L783.36 761.17c-1.024-11.264 7.506-21.156 18.77-22.18 11.264-1.024 21.166 7.506 22.19 18.77l11.95 135.854a29.389 29.389 0 0 1-6.492 21.504l-.676.676-39.598 45.056c-5.12 6.144-12.626 9.564-20.818 9.564zM581.294 663.552c-11.264 0-20.48-9.216-20.48-20.48V104.11l-333.486 129.7v174.08c0 11.264-9.216 20.48-20.48 20.48s-20.48-9.216-20.48-20.48V219.822c0-8.54 5.12-16.046 12.974-19.118L573.778 54.958a21.197 21.197 0 0 1 19.118 2.048c5.458 3.748 8.878 10.24 8.878 17.06v569.006c0 11.264-9.216 20.48-20.48 20.48z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M472.402 938.67H37.55c-11.264 0-20.48-9.216-20.48-20.48V412.334c0-11.264 9.216-20.48 20.48-20.48h372.388c11.264 0 20.48 9.216 20.48 20.48V897.71h41.984c11.264 0 20.48 9.216 20.48 20.48s-9.216 20.48-20.48 20.48zM58.03 897.71h331.428V432.814H58.03V897.71z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M190.126 539.31h-64.86v64.85h64.86v-64.85zm124.242 0h-64.85v64.85h64.85v-64.85zM190.126 680.274h-64.86v64.86h64.86v-64.86zm124.242 0h-64.85v64.86h64.85v-64.86zm49.838-402.084h-64.86v64.85h64.86v-64.85zm124.242 0h-64.85v64.85h64.85v-64.85zm280.576 527.698a7.987 7.987 0 0 1-5.806-2.386l-45.394-45.742a8.243 8.243 0 0 1 0-11.602l45.394-45.404c3.072-3.072 8.192-3.072 11.264 0l45.404 45.404c3.072 3.072 3.072 8.192 0 11.264l-45.404 45.394a6.554 6.554 0 0 1-5.458 3.072z" data-follow-fill="#0389FF" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Iconc1 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
